{% extends "base.html" %}

{% block content %}


    
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    
    <div class="container">
        <div class="row">
            <div id="chart2_demo" style="height: 500px; padding: 10px; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;" _echarts_instance_="1577091782314">
                <div style="position: relative; overflow: hidden; width: 934px; height: 500px;">
                    <div style="position: absolute; left: 0px; top: 0px; width: 934px; height: 500px; user-select: none;" data-zr-dom-id="bg" class="zr-element"></div>
                    <canvas style="position: absolute; left: 0px; top: 0px; width: 934px; height: 500px; user-select: none;" width="1167" height="625" data-zr-dom-id="0" class="zr-element"></canvas>
                    <canvas style="position: absolute; left: 0px; top: 0px; width: 934px; height: 500px; user-select: none;" width="1167" height="625" data-zr-dom-id="1" class="zr-element"></canvas>
                    <canvas style="position: absolute; left: 0px; top: 0px; width: 934px; height: 500px; user-select: none;" width="1167" height="625" data-zr-dom-id="_zrender_hover_" class="zr-element"></canvas>
                    <div class="echarts-dataview" style="position: absolute; display: block; overflow: hidden; transition: height 0.8s ease 0s, background-color 1s ease 0s; z-index: 1; left: 0px; top: 0px; width: 934px; height: 0px; background-color: rgb(240, 255, 255);"></div>
                    <div class="echarts-tooltip zr-element" style="position: absolute; display: none; border-style: solid; white-space: nowrap; transition: left 0.4s ease 0s, top 0.4s ease 0s; background-color: rgba(0, 0, 0, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); padding: 5px; left: 187px; top: 275px;">Feb
                        <br>Evaporation : 4.9
                        <br>Precipitation : 5.9</div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function createEBarChart(conf){
            var myChart = echarts.init(document.getElementById(conf.selector));
            var legendData = [];
            for(var i = 0; i < conf.data.series.length; i++){
                legendData.push(conf.data.series[i].name);
            }
            myChart.setOption({
                legend: {
                    y: 'bottom',
                    data:legendData
                },
                tooltip : {
                    trigger: 'axis'
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                xAxis : conf.data.xAxis,
                series : conf.data.series
            })
        }
        function initEBarChart(conf){
            $.ajax({
                url: conf.url,
                type: 'GET',
                dataType: conf.dataType,
                success: function(res){
                    
                    if (res.result){
                        createEBarChart({
                            selector: conf.containerId, 
                            data: res.data, 
                        });
                    }
                }
            })
        }
        $(function(){
            initEBarChart({
                url: '/stats',
                dataType: 'json',
                containerId: 'chart2_demo'
            });   
        });
    </script>

{% endblock %}